<template>
  <div ref="editor"></div>
</template>

<script>
  import E from 'wangeditor'
  import {baseURL} from '../../network/request'
  export default {
    name: 'wang-editor',
    data() {
      return {
        editor: null,
        editorContent: null,
        uploadUrl:"http://0.0.0.0:8901/api/v1/upload"
      }
    },
    props: {
      // 可选：comment, topic
      type: {
        type: String,
        default: 'topic'
      }
    },
    mounted() {
      var editor = new E(this.$refs.editor)
      // 移动端宽度不够用
      var isMobile = matchMedia('(max-width: 825px)').matches
      // 设置菜单选项
      // 发布文章用
      if(this.type == 'topic' && !isMobile) {
        editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'image',  // 插入图片
          'upload',  // 插入图片
          'code',  // 插入代码
        ]
      }
      // 评论用
      else if(this.type == 'comment' || isMobile) {
        editor.customConfig.menus = [
          'bold',  // 粗体
          'fontSize',  // 字号
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'code',  // 插入代码
        ]
      }
      editor.customConfig.onchange = (html) => {
        this.editorContent = html
      }
      // 配置 server 接口地址
      editor.customConfig.uploadImgServer = baseURL+"/upload"
      editor.customConfig.uploadFileName = 'file'
      editor.customConfig.uploadImgHooks = {
        // 图片上传并返回了结果，图片插入已成功
        success: function(xhr) {
          console.log('success', xhr)
        },
        fail: function(xhr, editor, resData) {
          console.log('fail', resData)
        },
        error: function(xhr, editor, resData) {
          console.log('error', xhr, resData)
        },
        customInsert: function(insertImgFn, result) {
          // result 即服务端返回的接口
          console.log('customInsert', result)
          console.log(result.data)
          // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
          insertImgFn(result.data)
        }
      }
      editor.create()
      this.editor = editor
    }
  }
</script>
<style>
</style>
